<div class="row-fluid">
    <div class="offset1 span10">
        <div class="timeline-container">


            <div class="timeline-items" id="notes">

            </div>
            <!--/.timeline-items-->
        </div>
        <!--/.timeline-container-->

    </div>
</div>


{% raw %}
<script id="tmpl_note_activity" type="text/x-dot-template">
    <div class="timeline-item clearfix">
        <div class="timeline-info">
            <img alt="" src="{{=it.created_by_thumbnail}}"/>
        </div>

        <div class="widget-box">
            <div class="widget-header widget-header-small header-color-{{=it.note_type_color}}">
                <h5 class="smaller">
                    <span>{{=it.note_type_name}}</span>
                </h5>

                <span class="widget-toolbar no-border date">
                <i class="icon-time bigger-110"></i>
                {{=it.created_date}}
                </span>

                <span class="widget-toolbar">

                <a href="#" data-action="collapse">
                    <i class="icon-chevron-up"></i>
                </a>
                </span>
            </div>

            <div class="widget-body">
                <div class="widget-main">

                    <a href="/users/{{=it.created_by_id}}/view">{{=it.created_by_name}}</a>
                    {{=it.content}}

                </div>
            </div>
        </div>
    </div>

</script>
{% endraw %}

{% raw %}
<script id="tmpl_note_simple_text" type="text/x-dot-template">
    <div class="timeline-item clearfix">
        <div class="timeline-info">
            <img alt="" src="{{=it.created_by_thumbnail}}"/>
        </div>

        <div class="widget-box transparent">
            <div class="widget-body">
                <div class="widget-main">
                    <a href="/users/{{=it.created_by_id}}/view">{{=it.created_by_name}}</a>

                    {{=it.content}}
                    <div class="pull-right date">
                        <i class="icon-time bigger-110"></i>
                        {{=it.created_date}}
                    </div>
                    <div class="space-3"></div>

                    <div class="widget-toolbox clearfix">

                        <div class="pull-right action-buttons">


                            <a class="red"
                               data-target="#dialog_template"
                               data-toggle="modal"
                               data-keyboard=false
                               href="/notes/{{=it.note_id}}/delete/dialog?came_from={{=it.came_from }}">
                                <i class="icon-remove red bigger-125"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</script>
{% endraw %}
<script type="text/javascript">

    $(document).ready(function () {


        var logged_in_user_id = '{{ logged_in_user.id }}'
        var notes = $('#notes');
        var note_simple_template = doT.template($('#tmpl_note_simple_text').html());
        var note_activity_template = doT.template($('#tmpl_note_activity').html());

        $.getJSON('/entities/{{ entity.id }}/notes/').then(function (data) {
            console.log('done')

            for (var i = 0; i < data.length; i++) {

                data[i].created_date = new Date(parseInt(data[i].created_date));

                if (data[i].created_by_thumbnail == null) {
                    data[i].created_by_thumbnail = '{{ request.static_url("stalker_pyramid:static/stalker/images/T_NO_IMAGE.gif") }}';
                }
                else {
                    data[i].created_by_thumbnail = '/' + data[i].created_by_thumbnail;
                }

                console.log(data[i].note_type_name)
                if (data[i].note_type_name == 'Simple Text' || !data[i].note_type_name) {

                    notes.append(note_simple_template(data[i]));
                }
                else {

                    notes.append(note_activity_template(data[i]));
                }


            }

            $('.date').each(function () {
                var date = moment.utc($(this).text());
                $(this).text(date.fromNow());
            });


        });
    });

</script>